<template>
  <div class="file-info pad content-container">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="head">
      <span>家庭成员健康档案({{name}})</span>
    </div>
    <div>
      <el-tabs class="m-t-b" type="border-card">
        <el-tab-pane label="标签信息">
          <el-table stripe class="m-t-b" :data="blanks" v-loading="loading">
            <el-table-column label="标签编号" prop="labelQuestionId">
            </el-table-column>
            <el-table-column label="标签名称" prop="name"></el-table-column>
            <el-table-column label="标签答案" prop="value"></el-table-column>
            <el-table-column label="创建日期" prop="createDate">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="问题信息">
          <el-table stripe class="m-t-b" :data="selects">
            <el-table-column label="问题编号" prop="labelQuestionId">
            </el-table-column>
            <el-table-column label="问题" prop="name">
            </el-table-column>
            <el-table-column label="答案">
              <template slot-scope="scope">
                {{scope.row[scope.row.value]}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片信息">
          <div class="flex">
            <el-input placeholder="图片标签" v-model="searchTxt" clearable @input="clearSearch" />
            <el-button @click="handleSearch" type="primary">
              <i class="el-icon-search"></i> 搜索
            </el-button>
          </div>
          <el-table stripe class="m-t-b" :data="imgs" v-loading="loading1">
            <el-table-column label="图片标签">
              <template slot-scope="scope">
                {{scope.row.name ? scope.row.name : '无'}}
              </template>
            </el-table-column>
            <el-table-column label="图片描述">
              <template slot-scope="scope">
                {{scope.row.picDescription ? scope.row.picDescription : '无'}}
              </template>
            </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <el-image class="fileImg pointer" :preview-src-list="srcList" :src="scope.row.pic">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" prop="createDate">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <scroll-top></scroll-top> -->
  </div>
</template>
<script>
import { getFileInfo, getImgsByRecordId } from '../api';
import { formatDate, getAge } from '../util';
// import ScrollTop from '../components/ScrollTop ';

export default {
  name: 'fileInfo',
  props: ['id', 'name'],
  data () {
    return {
      showDialog: false,
      loading: true,
      loading1: true,
      searchTxt: '',
      relative: '儿子',
      // questions: Array(10).fill({ id: 'Y001', question: '您每周有几天不吃早餐?', answer: '好多天' }),
      imgs: [],
      srcList: [],
      selects: [],
      blanks: [],
      title: '',
      file: {
        id: 'Y001',
        date: '2020-1-1',
        user: 'M001',
        relative: '女儿',
        gender: 1,
        age: 21,
        height: 168,
        weight: 54,
        blood: '80-120',
        heartRate: 80,
        waistline: 31,
        hipline: 35
      }
    }
  },
  // components: {
  //   ScrollTop
  // },
  methods: {
    goBack () {
      history.back()
    },
    handleSearch () {
      if (!this.searchTxt.trim()) {
        this.searchTxt = '';
        return this.$message.error('搜索内容不能为空!')
      };
      this.fetchImgs(this.id, this.searchTxt)
    },
    clearSearch () {
      if (!this.searchTxt) {
        this.fetchImgs(this.id)
      }
    },
    fetchRecord (id) {
      this.loading = true
      getFileInfo(id)
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.result;
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = formatDate(res.data.data.createDate);
            if (list[i].labelQuestionId === 4) { // 年龄
              let age = list[i].value;
              let arr = age.split('-');
              let year = arr[0];
              let month = arr[1][0] === '0' ? arr[1][1] : arr[1];
              let day = arr[2][0] === '0' ? arr[2][1] : arr[2];
              list[i].value = getAge(Number(year), Number(month), Number(day)) + '岁';
            } else if (list[i].labelQuestionId === 3) { // 性别
              list[i].value = list[i].value === '1' ? '男' : '女'
            }
          };
          this.blanks = list.filter(item => Number(item.type) === 1);
          this.selects = list.filter(item => Number(item.type) === 2);
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    },
    fetchImgs (id, name) { // 查询健康档案对应图片
      this.loading1 = true
      name = name || null;
      getImgsByRecordId({
        recordsId: id,
        name
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = formatDate(list[i].createDate);
            this.srcList.push(list[i].pic)
          };
          this.imgs = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading1 = false
      })
      .catch(e => {
        this.loading1 = false
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchRecord(this.id);
    this.fetchImgs(this.id)
  }
}
</script>
<style lang="scss">
  .file-info {
    .cell {
      text-align: center;
    }
    .fileImg {
      width: 50%;
    }
    .file-detail {
      width: 100%;
      tr {
        width: 100%;
        display: flex;
        td {
          flex: 1;
          text-align: center;
          padding: 8px 0;
          color: #242424;
          font-size: 16px;
          &:nth-of-type(1) {
            text-align: right;
            font-weight: bold;
          }
          &:nth-of-type(2) {
            padding-left: 10px;
            text-align: left;
          }
        }
      }
    }
  }
</style>
